<template>
  <div class="forecast-container">
    <div class="yy-title">疫情预测</div>
     <div class="tab_content" ref="tabcontent">
        <tab v-model="tabModel" active-color="#265eff" :line-width="2" bar-active-color="#265eff" default-color="#333333" >
          <tab-item selected
                    @on-item-click="onItemClick('#quanguo')">全国</tab-item>
          <tab-item @on-item-click="onItemClick('#hubei')">湖北</tab-item>
          <tab-item @on-item-click="onItemClick('#beijing')">北京</tab-item>
          <tab-item @on-item-click="onItemClick('#tianjin')">天津</tab-item>
          <tab-item @on-item-click="onItemClick('#guangzhou')">广东</tab-item>
          <tab-item @on-item-click="onItemClick('#zhejiang')">浙江</tab-item>
          <tab-item @on-item-click="onItemClick('#anhui')">安徽</tab-item>
          <tab-item @on-item-click="onItemClick('#henan')">河南</tab-item>
          <tab-item @on-item-click="onItemClick('#hunan')">湖南</tab-item>
          <tab-item @on-item-click="onItemClick('#chengdu')">成都</tab-item>
          <tab-item @on-item-click="onItemClick('#shanghai')">上海</tab-item>
          <tab-item @on-item-click="onItemClick('#jiangsu')">江苏</tab-item>
          <!-- <tab-item @on-item-click="onItemClick('#convergence')">广州</tab-item> -->
        </tab>
      </div>
      <div id="quanguo" class="yy-container-city" style=" margin-top: 0">
        <div class="yy-city-title">验证数据更新-2月3日 &nbsp;&nbsp;武汉市</div>
        <img src="../../assets/images/forecast/country-2-3.png" alt="">
        <div class="yy-city-title yy-city-msg">全国nCov疫情趋势预测（数据更新至2月3日）</div>
        <p style="text-indent: 2em;">全国、湖北、武汉、黄冈的新增和累计值与模型预测值基本吻合，只有武汉的新增数值有较大增幅，但仍在8日线以内，累计值规律十分平稳。从目前数据结果来看，拐点在6日至8日可能性较大。希望这个预测值能为各地相关部门进行防控物资准备和调度起到一定的指导作用。目前返工人流不断加大，经济发展压力也在增加，接触和暴漏的机会在显著增加，团队倡议：光明在前，大家努力，咬紧牙关，毫不松懈，再难也要挺过去，相信组织相信党，一切都会好起来的。</p>
        <p style="margin:3px 0 2px 0; text-indent: 2em;" >数据来源：国家及各地卫健委每日信息发布</p>
        <p style="margin:3px 0 15px 0; text-indent: 2em;">研究单位：清华大学公共安全研究院综合应急组</p>
        <div class="yy-city-title">验证数据更新-2月2日 &nbsp;&nbsp;黄冈市</div>
        <img src="../../assets/images/forecast/contry-2-3.png" alt="">
        <div class="yy-city-title yy-city-msg">全国nCov疫情趋势预测（数据更新至2月2日）</div>
        <p style="text-indent: 2em;">团队分析，如果火神山今天投入使用，会增加确诊数量，3号的数据会跳跃到曲线上方，这对拐点早日到来有利。大规模返城工作会增加防控难度，希望大家咬紧牙关、继续努力、不可松懈。</p>
        <!-- <p style="margin-top:3px;">数据来源：国家及各地卫健委每日信息发布</p>
        <p style="margin-top:3px;">研究单位：清华大学公共安全研究院综合应急组</p> -->
      </div>
      <div id="hubei" class="yy-container-city" >
        <div class="yy-city-title">验证数据更新至2月3日 &nbsp;&nbsp;湖北省</div>
        <img src="../../assets/images/forecast/hubei-2-3.png" alt="">
        <div class="yy-city-title yy-city-msg">湖北省nCov疫情趋势预测（数据更新至2月3日）</div>
        <div class="yy-city-title">武汉市</div>
        <img src="../../assets/images/forecast/wuhan-2-3.png" alt="">
        <div class="yy-city-title yy-city-msg">武汉市nCov疫情趋势预测（数据更新至2月3日）</div>
        <div class="yy-city-title">黄冈市</div>
        <img src="../../assets/images/forecast/huanggang-2-3.png" alt="">
        <div class="yy-city-title yy-city-msg">黄冈市nCov疫情趋势预测（数据更新至2月3日）</div>
        <div class="yy-city-title">验证数据更新至2月2日 &nbsp;&nbsp;湖北省</div>
        <img src="../../assets/images/forecast/hubei-2-2.png" alt="">
        <div class="yy-city-title yy-city-msg">湖北省nCov疫情趋势预测（数据更新至2月2日）</div>
        <p style="text-indent: 2em;">湖北省的拐点约在7、8号间。</p>
        <div class="yy-city-title">武汉市</div>
        <img src="../../assets/images/forecast/wuhan-2-2.png" alt="">
        <div class="yy-city-title yy-city-msg">武汉市nCov疫情趋势预测（数据更新至2月2日）</div>
        <p style="text-indent: 2em;">武汉市、湖北省曲线十分相似，武汉市的数据从不规律到逐渐规律，是党和国家的力量在发挥重要作用，数据表明，武汉的拐点与湖北基本一致，6号至8号应该会出现拐点。由于城市人口、疑似病人基数很大，随着诊疗设施大幅改善，可能会出现确诊数据激增，我们将依照新的数据进一步同化模型合肥的整体数据体量不大，数据离散厉害，总体而言，应在8号左右达到峰值和拐点。</p>
        <div class="yy-city-title">黄冈市</div>
        <img src="../../assets/images/forecast/huanggang-2-2.png" alt="">
        <div class="yy-city-title yy-city-msg">黄冈市nCov疫情趋势预测（数据更新至2月2日）</div>
        <p style="text-indent: 2em;">黄冈市疫情数值比较离散，但还是存在大趋势，模型乐观预测拐点在7号、8号左右，希望接下来的防控更有序、更有力，更有效。</p>
       <!-- <p style="margin-top:3px;">数据来源：国家及各地卫健委每日信息发布</p>
        <p style="margin-top:3px;">研究单位：清华大学公共安全研究院综合应急组</p> -->
      </div>
      <div id="beijing" class="yy-container-city" >
        <div class="yy-city-title">验证数据更新-2月3日 &nbsp;&nbsp;北京市</div>
        <img src="../../assets/images/forecast/beijing-2-3.png" alt="">
        <div class="yy-city-title yy-city-msg">北京市nCov疫情趋势预测（数据更新至2月3日）</div>
         <div class="yy-city-title">验证数据更新-2月2日 &nbsp;&nbsp;北京市</div>
        <img src="../../assets/images/forecast/beijing-2-2.png" alt="">
        <div class="yy-city-title yy-city-msg">北京市nCov疫情趋势预测（数据更新至2月3日）</div>
        <p style="text-indent: 2em;">北京市拐点约在6、7号间，且北京为返城人员大市，后续的输入性防控压力会急剧增大，既要安置好回城人员，又要做好排查防控。</p>
        <!--<p style="margin-top:3px;">数据来源：国家及各地卫健委每日信息发布</p>
        <p style="margin-top:3px;">研究单位：清华大学公共安全研究院综合应急组</p> -->
      </div>
      <div id="tianjin" class="yy-container-city" >
        <div class="yy-city-title">验证数据更新-2月3日 &nbsp;&nbsp;天津市</div>
        <div class="yy-city-title">验证数据更新-2月2日 &nbsp;&nbsp;天津市</div>
        <img src="../../assets/images/forecast/tianjin-2-2.png" alt="">
        <div class="yy-city-title yy-city-msg">天津市nCov疫情趋势预测（数据更新至2月2日）</div>
        <p style="text-indent: 2em;">天津市拐点约在6、7号间，且北京为返城人员大市，后续的输入性防控压力会急剧增大，既要安置好回城人员，又要做好排查防控。</p>
        <!-- <p style="margin-top:3px;">数据来源：国家及各地卫健委每日信息发布</p>
        <p style="margin-top:3px;">研究单位：清华大学公共安全研究院综合应急组</p> -->
      </div>
      <div id="guangzhou" class="yy-container-city" >
        <div class="yy-city-title">验证数据更新-2月3日 &nbsp;&nbsp;广东省</div>
        <img src="../../assets/images/forecast/guangdong-2-3.png" alt="">
        <div class="yy-city-title yy-city-msg">广东省nCov疫情趋势预测（数据更新至2月3日）</div>
        <p style="text-indent: 2em;">由于受人口大量输入和偶发集聚型多发因素影响，广东和浙江3日的新增病例数均有较大增加，防控难度在加大，但累计病例人数仍在预测曲线以内。值得注意的是，如果明天、后天增长势头还大幅增加，当累积数突破预测累积曲线时，就要重新同化模型，说明已经到来的拐点会发生变化，需要特别警惕，不能松懈，需要继续加大防控力度。</p>
        <div class="yy-city-title">验证数据更新-2月2日 &nbsp;&nbsp;广东省</div>
        <img src="../../assets/images/forecast/guangdong-2-2.png" alt="">
        <div class="yy-city-title yy-city-msg">广东省nCov疫情趋势预测（数据更新至2月2日）</div>
        <p style="text-indent: 2em;">数据表明，广东于2月1日到达拐点，由于广东省为务工人员输入大省，未来的防控形势将十分严峻，希望实施有针对性的防控</p>
        <!-- <p style="margin-top:3px;">数据来源：国家及各地卫健委每日信息发布</p>
        <p style="margin-top:3px;">研究单位：清华大学公共安全研究院综合应急组</p> -->
      </div>
      <div id="zhejiang" class="yy-container-city" >
        <div class="yy-city-title">验证数据更新-2月3日 &nbsp;&nbsp;浙江省</div>
        <img src="../../assets/images/forecast/zhejiang-2-3.png" alt="">
        <div class="yy-city-title yy-city-msg">浙江省nCov疫情趋势预测（数据更新至2月3日）</div>
        <p style="text-indent: 2em;">浙江的数据近期波动很大，利用整体实证数据对模型进行了再同化，同化后的拐点变为3号～5号左右，浙江省4号的数据很重要，对于稳定模型非常关键。    浙江是是人口输入输出流动大省市，毫不松懈的管控到了非常关键时刻，希望每一个人摒弃侥幸心理，听从国家安排，挺住、坚持住，不要出门！出门一定要带口罩！坚决杜绝偶发性积聚型传染。</p>
        <div class="yy-city-title">验证数据更新-2月2日 &nbsp;&nbsp;浙江省</div>
        <img src="../../assets/images/forecast/zhejiang-2-2.png" alt="">
        <div class="yy-city-title yy-city-msg">浙江省nCov疫情趋势预测（数据更新至2月2日）</div>
        <p style="text-indent: 2em;">数据表明，浙江省于元月30日到达拐点，由于浙江省为务工人员输入大省，未来的防控形势将十分严峻，希望实施有针对性的防控</p>
        <!-- <p style="margin-top:3px;">数据来源：国家及各地卫健委每日信息发布</p>
        <p style="margin-top:3px;">研究单位：清华大学公共安全研究院综合应急组</p> -->
      </div>
      <div id="anhui" class="yy-container-city" >
        <div class="yy-city-title">验证数据更新-2月3日 &nbsp;&nbsp; 安徽省</div>
        <p style="margin-top:3px;">安徽省</p>
        <p style="margin-top:3px;">合肥市</p>
        <div class="yy-city-title">验证数据更新-2月2日 &nbsp;&nbsp; 安徽省</div>
        <img src="../../assets/images/forecast/anhui-2-2.png" alt="">
        <div class="yy-city-title yy-city-msg">安徽省nCov疫情趋势预测（数据更新至2月2日）</div>
        <p style="text-indent: 2em;">安徽省拐点约在6、7号间。</p>
        <div class="yy-city-title">合肥市</div>
        <img src="../../assets/images/forecast/hefei-2-2.png" alt="">
        <div class="yy-city-title yy-city-msg">合肥市nCov疫情趋势预测（数据更新至2月2日）</div>
        <!-- <p style="text-indent: 2em;">安徽省拐点约在6、7号间。</p> -->
      </div>
      <div id="henan" class="yy-container-city" >
        <div class="yy-city-title">验证数据更新-2月3日 &nbsp;&nbsp;河南省</div>
        <img src="../../assets/images/forecast/henan-2-3.png" alt="">
        <div class="yy-city-title yy-city-msg">河南省nCov疫情趋势预测（数据更新至2月3日）</div>
        <p style="text-indent: 2em;">河南省的预测拐点在6～8号左右，与全国的预测拐点基本一致。河南是人口输入输出流动大省市，毫不松懈的管控到了非常关键时刻，希望每一个人摒弃侥幸心理，听从国家安排，挺住、坚持住，不要出门！出门一定要带口罩！坚决杜绝偶发性积聚型传染。</p>
        <div class="yy-city-title">验证数据更新-2月2日 &nbsp;&nbsp;河南省</div>
        <!-- <p style="margin-top:3px;">数据来源：国家及各地卫健委每日信息发布</p>
        <p style="margin-top:3px;">研究单位：清华大学公共安全研究院综合应急组</p> -->
      </div>
      <div id="hunan" class="yy-container-city" >
        <div class="yy-city-title">验证数据更新-2月3日 &nbsp;&nbsp;湖南省</div>
        <img src="../../assets/images/forecast/hunan-2-3.png" alt="">
        <div class="yy-city-title yy-city-msg">湖南省nCov疫情趋势预测（数据更新至2月3日）</div>
        <!-- <p style="text-indent: 2em;">全国、湖北、武汉、黄冈的新增和累计值与模型预测值基本吻合，只有武汉的新增数值有较大增幅，但仍在8日线以内，累计值规律十分平稳。从目前数据结果来看，拐点在6日至8日可能性较大。希望这个预测值能为各地相关部门进行防控物资准备和调度起到一定的指导作用。目前返工人流不断加大，经济发展压力也在增加，接触和暴漏的机会在显著增加，团队倡议：光明在前，大家努力，咬紧牙关，毫不松懈，再难也要挺过去，相信组织相信党，一切都会好起来的。</p>
        <p style="margin-top:3px;">数据来源：国家及各地卫健委每日信息发布</p>
        <p style="margin-top:3px;">研究单位：清华大学公共安全研究院综合应急组</p> -->
      </div>
      <div id="chengdu" class="yy-container-city" >
        <div class="yy-city-title">验证数据更新-2月3日 &nbsp;&nbsp;四川成都</div>
        <img src="../../assets/images/forecast/chengdu-2-3.png" alt="">
        <div class="yy-city-title yy-city-msg">成都市nCov疫情趋势预测（数据更新至2月3日）</div>
        <!-- <p style="text-indent: 2em;">全国、湖北、武汉、黄冈的新增和累计值与模型预测值基本吻合，只有武汉的新增数值有较大增幅，但仍在8日线以内，累计值规律十分平稳。从目前数据结果来看，拐点在6日至8日可能性较大。希望这个预测值能为各地相关部门进行防控物资准备和调度起到一定的指导作用。目前返工人流不断加大，经济发展压力也在增加，接触和暴漏的机会在显著增加，团队倡议：光明在前，大家努力，咬紧牙关，毫不松懈，再难也要挺过去，相信组织相信党，一切都会好起来的。</p>
        <p style="margin-top:3px;">数据来源：国家及各地卫健委每日信息发布</p>
        <p style="margin-top:3px;">研究单位：清华大学公共安全研究院综合应急组</p> -->
      </div>
      <div id="shanghai" class="yy-container-city" >
        <div class="yy-city-title">验证数据更新-2月3日 &nbsp;&nbsp;上海市</div>
        <img src="../../assets/images/forecast/shanghai-2-3.png" alt="">
        <div class="yy-city-title yy-city-msg">上海市nCov疫情趋势预测（数据更新至2月3日）</div>
        <p style="text-indent: 2em;">上海数据质量比较稳定，峰值在预测在5～6号左右。上海是是人口输入输出流动大省市，毫不松懈的管控到了非常关键时刻，希望每一个人摒弃侥幸心理，听从国家安排，挺住、坚持住，不要出门！出门一定要带口罩！坚决杜绝偶发性积聚型传染。</p>
      </div>
      <div id="jiangsu" class="yy-container-city" >
        <div class="yy-city-title">验证数据更新-2月3日 &nbsp;&nbsp;江苏省</div>
        <img src="../../assets/images/forecast/jiangsu-2-3.png" alt="">
        <div class="yy-city-title yy-city-msg">江苏省nCov疫情趋势预测（数据更新至2月3日）</div>
        <p style="text-indent: 2em;">江苏省数据质量比较稳定，峰值在预测在5～6号左右。上海是是人口输入输出流动大省市，毫不松懈的管控到了非常关键时刻，希望每一个人摒弃侥幸心理，听从国家安排，挺住、坚持住，不要出门！出门一定要带口罩！坚决杜绝偶发性积聚型传染。</p>
        <!-- <p style="margin-top:3px;">数据来源：国家及各地卫健委每日信息发布</p>
        <p style="margin-top:3px;">研究单位：清华大学公共安全研究院综合应急组</p> -->
      </div>
  </div>
</template>
<script>
import { Tab, TabItem, } from 'vux';
export default {
  components:{
     Tab,
     TabItem,
  },
  data(){
    return{
      active: 0,
      tabModel: 0,
    }
  },
  created(){

  },
  watch:{
    active(){
      console.log(this.active)
    }
  },
  mounted(){
    console.log(this.active)

  },
  methods:{
    onItemClick (_id) {
      this.$el.querySelector(_id).scrollIntoView();
    }
  }

}
</script>
<style lang="less">
  .forecast-container{
    width: 100vw;
    height: 100vh;
    // background: lightcoral;
    .yy-title{
      height: 0.8rem;
      width: 100vw;
      background: #265eff;
      color: white;
      line-height: 0.8rem;
      font-size: 18px;
      font-weight: 500;
      text-align: center;
    }
    .yy-container-city{
      width: 100vw;
      min-height: 3.5rem;
      margin-top: 15px;
      border-top: 1px solid #dddddd;
      .yy-city-title{
        width: 100vw;
        height: 36px;
        line-height: 36px;
        font-size: 15px; 
        font-weight: 500;
        text-indent: 1em;
      }
      .yy-city-msg{
        text-align: center;
        color:#838383;
      }
      img{
        padding: 0 15px 0 15px;
        display: block;
        width: 100vw;
        height:3rem;
      }
      p{
        margin: 0 15px 0 15px;
        // text-indent: 2em;
        // height: 20px;
        font-size: 13px;
        line-height: 22px;

      }
      // background: blanchedalmond;
    }
    .tab_content{
      width: 100vw;
      overflow-x: scroll;
      .vux-tab{
        display:  -webkit-box!important;
        margin: 0 10px 0 10px;
      }
      .vux-tab-item{
        // width: 100px;
        display:  -webkit-box!important;
      }
    }
  }
</style>